<template>
        <view class="openshop">
            <form @submit="handleSubmit">
                <view class="group">
                        <view class="label">标题</view>
                        <view class="input-item">
                            <input type="text" 
                                   :value="articleTitle" 
                                   placeholder-class="placeholder" 
                                   placeholder="请输入您的文章标题" 
                                   class="input" 
                                   name="articleTitle"   
                                   maxlength="100"  />
                        </view>
                </view>

                     <view class="group">
                        <view class="label">类别</view>
                        <view class="input-picker">
                            <view class="picker-text" >{{classifyName}}</view>    
                            <picker  :value="classifyId " 
                                     :range="classlist" 
                                     range-key="classifyName"
                                    @change="changeClass">
                                    <view class="picker">
                                    
                                    
                                        <view ><image class="allow-down" src="/static/images/allow-down.png" /></view>  
                                    </view>     
                            </picker>
                         </view>
                      </view>




                <view class="group">
                        <view class="label">标签</view>
                        <view class="input-item">
                            <input type="text" 
                                   :value="articleTag" 
                                   placeholder-class="placeholder" 
                                   placeholder="请输入文章标签限6字以内" 
                                   class="input"  
                                   name="articleTag" 
                                   maxlength="6" />
                        </view>
                </view>

            

                  <view class="media-group">
                      <view class="top">
                        <view class="upfile-title" >上传(图片最多9张,视频最多1个)</view>
                        <view class="media-con">
                          
                            <view :class="[mediaIdx == 1?'switch-on media-tab ':'media-tab ']">
                                    <view :class="[mediaIdx == 0?'on':'']" @tap="mediaTab(0)">图片</view>
                                    <view :class="[mediaIdx == 1?'on':'']" @tap="mediaTab(1)">视频</view>
                                   
                            </view>
                        </view>
                      </view>   

                      <view class="bottom">
                       
                        <view class="input-item">
                            <view v-if="mediaIdx == 1">
                                <UpVideo  @setVideoUrl="getVideo"  :videoUrl="articleVideo" />
                            </view>
                            <view v-if="mediaIdx == 0">
                            
                                <UpImag maxCount="9"  @setImages="getImags" :images="defaultImages"  />
                            </view>    
                        </view>

                      </view>  
                </view>

                <view class="editor-group">
                      <view class="label">文章描述</view>
                      <MyEditor :editorContent="defaultArticleDetail"  @getEditor="getEditor" />
                </view>

                   <view class="group">
                        <view class="label">相关商品</view>
                        <view class="input-picker">
                            <view class="picker-text" >{{goodName}}</view>    
                            <picker  :value="cardId" 
                                     :range="goodlist" 
                                     range-key="cardName"
                                    @change="changeGood">
                                    <view class="picker">
                                    
                                    
                                        <view ><image class="allow-down" src="/static/images/allow-down.png" /></view>  
                                    </view>     
                            </picker>
                         </view>
                      </view>
                
                    <view class="note">提示：未设置相关商品，则文章自动关联到您的店铺</view>

                <button class="submit" form-type="submit" :loading="isSubmit">保存</button>

                <TopTips :msg="checkRemark"  type="error" v-if="isShowTips" />
            </form>   
        </view>
</template>
<script lang="ts">

import {Vue, Component , Emit} from 'vue-property-decorator';
import UpVideo from './_components/upVideo.vue'
import UpImag from '@components/upImag/index.vue'
import MyEditor from '@components/myEditor/index.vue'
import TopTips from '@components/topTips/index.vue'
import {
    postReleaseLessayMy,
    postLessayMySelect,
    postLessayMyUpdate,
    postClassify,
    postLessayGood
    } from '@/request/actions'


// 1图片 2视频
@Component({
    components:{
        UpImag,
        UpVideo,
        MyEditor,
        TopTips
    }
})
export default class extends Vue {
   


            mediaIdx:string|number = 0;
            articleTitle:string = "";
            articleTag:string = '';
            defaultImages:Array<any> = [];
            articleVideo:string = '';
            defaultArticleDetail:string = '';
            checkRemark:string = '';
            isShowTips:boolean = false;
            articleDetail:string = '';
            salonId:string = '';
            Images:Array<any> =[];
            id :string | number = '';
            isSubmit:boolean = false;
            articleVideoImage:string = '';
            classlist:Array<any> = [];
            classifyId:string = '';
            classifyName:string = '请选择文章类别';
            goodId:string = '';
            goodName:string = '请选择相关商品';
            goodlist:Array<any> = [];
        

        changeClass(e:any){
            let i = e.detail.value;

            this.classifyId = this.classlist[i].classifyId;
            this.classifyName = this.classlist[i].classifyName;
           
        }

        changeGood(e:any){
            let i = e.detail.value;

            this.goodId = this.goodlist[i].cardId;
            this.goodName = this.goodlist[i].cardName;
           
        }
      
      
        mediaTab(i:number){
           
            this.mediaIdx = i ;
   
        }

        handleSubmit(e:any){
            let {articleTitle ,articleTag} = e.detail.value;
            let  images = this.Images;
            let globalData = getApp().globalData;
            let  articleVideo = this.articleVideo;
            let  articleDetail = this.articleDetail.length == 0?this.defaultArticleDetail:this.articleDetail;
            let mediaIdx = this.mediaIdx;
            let salonId = this.salonId;
            let {userId} = globalData.userInfo;
            let articleVideoImage = this.articleVideoImage;
            let goodId = this.goodId;
            let classifyId = this.classifyId;
       
           
          


             if(articleTitle.length == 0){
                   return uni.showToast({
                        title: '请输入您的文章标题',
                        icon: 'none',
                        duration: 2000
                    })
               }else if(mediaIdx == 0 && images.length == 0){
                     return uni.showToast({
                        title: '请选择图片,最多9张',
                        icon: 'none',
                        duration: 2000
                    })

               }else if(mediaIdx == 1 && articleVideo.length == 0){
                     return uni.showToast({
                        title: '请选择视频，最多1个',
                        icon: 'none',
                        duration: 2000
                    })

               }else if( articleDetail.length == 0){
                     return uni.showToast({
                        title: '请填写文章描述',
                        icon: 'none',
                        duration: 2000
                    })

               }else if(classifyId.length == 0){
                     return uni.showToast({
                        title: '请选择文章类别',
                        icon: 'none',
                        duration: 2000
                    })
               }

            let opts = mediaIdx == 0?{userId ,classifyId,goodId,salonId,articleTitle ,articleTag,images,articleDetail}:{classifyId,goodId,userId,salonId,articleTitle ,articleTag,articleVideo,articleDetail,articleVideoImage}
            
            if(this.isSubmit) return;
            this.isSubmit = true;


            if(this.id){

                    postLessayMyUpdate({...opts,id:this.id}).then((r:any)=>{
                            let {data:res} = r;
                            if(res.status == 200){
                                this.isSubmit = false;
                                    return uni.showModal({
                                            content:res.message,
                                            showCancel:false,
                                            success:()=>{
                                                uni.navigateBack();
                                            }
                                        })
                            }
                    })

            }else{

                    postReleaseLessayMy(opts).then((r:any)=>{
                            let {data:res} = r;
                             this.isSubmit = false;
                            if(res.status == 200){
                                    return uni.showModal({
                                            content:res.message,
                                            showCancel:false,
                                            success:()=>{
                                                uni.navigateBack();
                                            }
                                        })
                            }
                    })



            } 

          

               
        }

         getImags(l:any){
             console.log(l,this.articleDetail)
            this.Images = l;
          
        }
          getVideo(url:any){
              console.log(url)
       
            this.articleVideo = url.path;
            this.articleVideoImage = url.listImage;

           
        }

         getEditor(res:any){
            let {html,text} = res;
     
            if(text.length != 0 ){
                 this.articleDetail = html;
            }else{
                this.articleDetail = '';
            }
           
          
        }

     
    onLoad(query:any){
            let {id} =query;
            let globalData = getApp().globalData;
            let {userId} = globalData.userInfo;
            this.salonId = globalData.salonId;
            this.id = id || '';
            this.isShowTips = false;
            this.Images = [];
            this.articleDetail = '';

          
           
            if(id){
                   postLessayMySelect({id, salonId:this.salonId,userId}).then((r:any)=>{
                        let {data:res} = r;
                        if(res.status == 200){
                             ({isVideo:this.mediaIdx,checkRemark:this.checkRemark,images:this.defaultImages,articleTitle:this.articleTitle,articleTag:this.articleTag,articleDetail:this.defaultArticleDetail} = res.data.stulist);

                       
                             
                             if(this.mediaIdx == 1){
                                  this.articleVideo = res.data.stulist.articleVideo
                             }else {
                                  this.Images = this.defaultImages.map(item=>item.imagesPath);
                             }
                           
                          
                                 (this.checkRemark)  && (this.isShowTips = true);
                           
                           
                                 this.articleDetail = this.defaultArticleDetail;
                        
                    

                        }
                       
                   }) 
            }


            postClassify().then((r:any)=>{

                let {data:res} = r;

                if( res.status == 200){
                    this.classlist = res.data;
                }

            })

            postLessayGood({belongtoid:this.salonId}).then((r:any)=>{

                let {data:res} = r;

                if( res.status == 200){
                     this.goodlist = res.data.stulist;
                }

            })
       
      

    }
   

    

        
  
}
</script>
<style lang="scss">
  @import './_static/scss/index.scss';
</style>